<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>会员专区</title>
    <link rel="Shortcut Icon" href="/static/images/logoIcon.icon">
    <link rel="stylesheet" type="text/css" href="/static/css/vip.css">
</head>
<body>
<div class="box-vip">
    <div class="vip">
        <!--	未登录前连接登录注册	-->
        <div class="download" th:if="${session.user==null}">
            <a href="/user/sign">请登录开通会员</a>
            <i class="fa fa-angle-right"></i>
        </div>
        <!--登陆后显示用户信息-->
        <div class="user-information">
            <a href="/user/personalData">
                <div th:if="${session.user!=null}" class="user-photo">
                    <img th:src="${session.user.uHead}">
                </div>
            </a>
            <div class="user-content">
                <div class="user-name" th:text="${user.uName}"></div>
                <div class="status" th:text="${user.uVip}"></div>
                <div class="back">
                    <a href="/user/index">返回主页</a>
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
        </div>

        <div class="learn-vip">
            <p style="margin-top: 12px;font-size: 16px;color:#11264f;font-weight: 500">每日送金币，特享专权</p>
            <p style="font-size: 22px;color:#11264f;font-weight: 500;">新人开通可享多倍优惠</p>
            <p style="color:#121a2a;font-weight: 500;">享众多会员特权，体验不一样的感受</p>
        </div>

        <div class="text-vip">
            <div class="head-text">
                <img src="/static/images/logo-1.png">会员(VIP)
            </div>
            <div class="buy-text">
                <div class="buy-col">
                    <div class="col-left">
                        <div class="col-text">
                            <span class="max-time">3个月</span>
                            <input id="three" type="hidden" value="3"/>
                            <span class="save">首充省￥60</span>
                            <span class="special">特价</span>
                        </div>
                        <p class="gift">每天定时赠送100金币</p>
                    </div>
                    <span class="money" style="margin: 0;">￥</span>
                    <span class="money" th:text="${vip.eVipPrice3}"></span>
                    <button class="open">开通</button>
                </div>
            </div>
            <div class="buy-col">
                <div class="col-left">
                    <div class="col-text">
                        <span class="max-time">6个月</span>
                        <input id="six" type="hidden" value="6"/>
                        <span class="save">首充省￥98</span>
                        <span class="special">特价</span>
                    </div>
                    <p class="gift">每天定时赠送300金币</p>
                </div>
                <span class="money" style="margin: 0;">￥</span>
                <span class="money" th:text="${vip.eVipPrice6}"></span>
                <button class="open">开通</button>
            </div>

            <div class="buy-col">
                <div class="col-left">
                    <div class="col-text">
                        <span class="max-time">12个月</span>
                        <input id="twelve" type="hidden" value="12"/>
                        <span class="save">首充省￥149</span>
                        <span class="special">特价</span>
                    </div>
                    <p class="gift">每天定时赠送500金币</p>
                </div>
                <span class="money" style="margin: 0;">￥</span>
                <span class="money" th:text="${vip.eVipPrice12}"></span>
                <button class="open">开通</button>
            </div>
        </div>
        <div class="power">
            <div class="power-title">会员权益</div>
            <div class="power-col">
                <div class="content-col">
                    <p class="tip-col">3个月
                        <span class="tip">每天赠送100金币</span>
                    </p>
                    <p class="tip-col">6个月
                        <span class="tip">每天赠送300金币</span>
                    </p>
                    <p class="tip-col">12个月
                        <span class="tip">每天赠送500金币</span>
                    </p>
                </div>
            </div>
            <div class="power-look">
                <div class="title-look">
                    <span class="title-txt">会员优惠打折区</span>
                    <!-- 连接小册买书页面 -->
                    <a class="more" href="/user/serialize">查看更多
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>
                <div class="discount">
                    <div class="content-dis">
                        <div class="list-dis" th:each="serialize : ${recommendSerialize}">
                            <div class="list-bg">
                                <div class="bg-dis">
                                    <!-- 点击书链接到对书本的介绍、试读页面 -->
                                    <a href="/user/readBook?/readBook=">
                                        <img th:src="${serialize.sAddress}">
                                    </a>
                                </div>
                                <div class="detail-list">
                                    <h5>前端面试之道</h5>
                                    <p style="text-decoration: line-through;">￥56</p>
                                    <p style="color: #2585a6;">3折优惠</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="power-col" style="margin-top: 26px;">
                <div class="gold">
                    <div class="title-gold">
                        <p>金币可以干什么</p>
                    </div>
                    <div class="content-gold">
                        <ul class="use">
                            <li>持币有奖励,特定节日会有意外小惊喜</li>
                            <li>评论可发自己的精美小图</li>
                            <li>用来抵取部分现金，可用来充值会员</li>
                            <li>更有其他超越好处哦...</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="foot">
                <button class="all-year">
                    <p>立即开通会员</p>
                    <span>会员特惠
	                <span>原价￥216</span>
	              </span>
                </button>
            </div>
        </div>
        <!--模态框-->
        <div class="bg-model">
            <div class="card">
                <div class="disappear">x</div>
                <div class="card-content">
                    <h3>购买会员</h3>
                    <div class="card-list">
                        <div class="tip-all">支付总额</div>
                        <div class="price  consumption"></div>
                        <div class="consumption">￥</div>
                    </div>
                    <div class="type">
                        <span>支付方式</span>
                    </div>
                    <div class="paytype">
                        <form action="/pay/buyVip" method="post">
                            <div class="golder" style="border-right:2px solid #e7e7e7; ">
                                <div class="title">
                                    <span>金币:</span>
                                    <span class="price"></span>
                                    <input class="time" type="hidden" name="timeLong" value="" >
                                </div>
                                <div class="goldpay">
                                    <button id="gold" type="submit">支付</button>
                                </div>
                            </div>
                        </form>

                        <form action="/pay/goAlipay" method="post">
                            <input type="hidden" value="购买会员" name="message" >
                            <input type="hidden" th:value="${user.uName}" name="name">
                            <div class="golder">
                                <div class="title">
                                    <span class="alipay">支付宝</span>:
                                    <input type="hidden" name="type" value="支付宝">
                                    <span class="price"></span>
                                    <input type="hidden" name="money" value="" class="page">
                                </div>
                                <div class="goldpay">
                                    <button id="tell" type="submit">支付</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="bigmodel">
            <div class="card">
                <div class="disappear">x</div>
                <div class="card-content">
                    <h3>购买会员</h3>
                    <div class="card-list">
                        <div class="tip-all">支付总额</div>
                        <div class="price  consumption" th:text="${vip.eVipPrice1}"></div>
                        <div class="consumption">￥</div>
                    </div>
                    <div class="type">
                        <span>支付方式</span>
                    </div>
                    <div class="paytype">
                        <form action="/pay/buyVip" method="post">
                            <div class="golder" style="border-right:2px solid #e7e7e7; ">
                                <div class="title">
                                    <span>金币:</span>
                                    <span class="price" th:text="${vip.eVipPrice1}"></span>
                                    <input type="hidden" name="timeLong" value="1" >
                                </div>
                                <div class="goldpay">
                                    <button id="gol" type="submit">支付</button>
                                </div>
                            </div>
                        </form>

                        <form action="/pay/goAlipay" method="post">
                            <input type="hidden" value="购买会员" name="message" >
                            <input type="hidden" th:value="${user.uName}" name="name">
                            <div class="golder">
                                <div class="title">
                                    <span class="alipay">支付宝</span>:
                                    <input type="hidden" name="type" value="支付宝">
                                    <span class="price" th:text="${vip.eVipPrice1}"></span>
                                    <input type="hidden" name="money" value="" class="pag">
                                </div>
                                <div class="goldpay">
                                    <button id="tel" type="submit">支付</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script type="text/javascript" src="/static/js/jquery-3.4.0.js"></script>
<script type="text/javascript" src="/static/js/vip.js"></script>
</html>